<template>
  <div>
    <div class="container">
      <div class="left">
        <div class="active">{{dapartment}}</div>
      </div>
      <div class="right">
        <div ref="scrollArea" class="right-area">
          <div 
            v-for="item,index in msgList" 
            :key="index" 
            class="item"
          >
            <p>{{item.speaktime | formatDate}} {{item.departmentname}} {{item.employeename}}</p>
            <p>{{item.content}}</p>
          </div>
        </div>
        <div class="right-input">
          <textarea v-model="msg" @keydown.enter="sendMessage()" placeholder="请输入" type="text" />
          <i @click="sendMessage()" class="el-icon-position"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "commonChat",
  filters: {
    formatDate(time) {
      function formatTips(number){
        return (String(number)[1] && String(number)) ?? '0' + number
      }
      let date = new Date(time)
      return `${date.getFullYear()}.${formatTips(date.getMonth())}.${formatTips(date.getDate())} ${formatTips(date.getHours())}:${formatTips(date.getMinutes())}:${formatTips(date.getSeconds())}`
    }
  },
  data(){
    return {
      dapartment: '',
      msg: '',
      msgList: [{
        content: '你好',
        time: '2020.09.15 21:01:38',
        department: '行政组',
        username: '杜小满'
      },{
        content: '321',
        time: '2020.09.15 21:01:38',
        department: '行政组',
        username: '杜2小满'
      },{
        content: '321',
        time: '2020.09.15 21:01:38',
        department: '行政组',
        username: '杜1小满'
      }],
      timer: ''
    }
  },
  methods: {
    formatDate(time) {
      function formatTips(number){
        return (String(number)[1] && String(number)) ?? '0' + number
      }
      let date = new Date(time)
      return `${date.getFullYear()}.${formatTips(date.getMonth() + 1)}.${formatTips(date.getDate())} ${formatTips(date.getHours())}:${formatTips(date.getMinutes())}:${formatTips(date.getSeconds())}`
    },
    async sendMessage() {
      if(this.msg.trim() === '') return this.msg = '';

      let {code, msg} = await this.$post('/chatContent', {
        data: {
          content: this.msg
        }
      })

      if(code === 200 ) {
        // const msg = {
        //   departmentname:this.department,
        //   employeename: this.$store.state.user.user.employeename,
        //   speaktime:this.formatDate(new Date()),
        //   content:this.msg
        // }
        // this.msgList.push(msg)
        this.msg = ''
        this.$message.success("发送消息成功")
        // 滚动到最底部
        this.$nextTick(() => {
          this.$refs.scrollArea.scrollTop = this.$refs?.scrollArea?.scrollHeight
        })
      } else {
        this.$message.error(msg)
      }

    },
    async initData() {
      let {code, data, msg} = await this.$post('/chat')
      if(code === 200) {
        this.msgList = data.chats
        this.dapartment = data.dapartment
      }else {
        console.log(msg)
        // this.$message.error(msg)
      }

      // 滚动到底部
      this.$nextTick(() => {
        this.$refs.scrollArea.scrollTop = this.$refs.scrollArea.scrollHeight
      })
    }
  },
  async mounted() {
    this.initData()

    this.timer = setInterval(async () => {
      await this.initData()
    },1100)
  },
  destroyed() {
    clearInterval(this.timer)
  }
}
</script>

<style scoped lang="scss">
.container {
  margin-left: 100px;
  margin-top: 50px;
  display: flex;
  height: 400px;

  .left {
    width: 200px;
    // background: #000;

    div {
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 15px;
    }

    .active {
      background: #f7f9fc;
    }
  }

  .right {
    width: 400px;
    // background: pink;
    border-top: 1px solid #f7f9fc;

    .right-area {
      height: 240px;
      margin-bottom: 20px;
      overflow-y: scroll;
      border-bottom: 1px solid #f7f9fc;

      .item {
        // background: pink;
        width: 300px;
        padding: 5px;
        font-size: 14px;

        p {
          &:nth-child(2) {
            // color: red;
            padding-top: 3px;
          }
        }
      }
    }

    .right-input {
      position: relative;
      height: 100px;
      background: #f5fafd;

      textarea {
        border: none;
        outline: none;
        width: 100%;
        height: 100%;
        background: transparent;
        resize: none;
      }

      i {
        position: absolute;
        right: 10px;
        bottom: 10px;
        color: #5186ff;
      }
    }

  }
}
</style>